<template>
	<el-menu 
	:collapse-transition="false"
	:collapse="collapse"
	active-text-color="#409eff"
	background-color="#304156"
	class="el-menu-vertical-demo"
	:unique-opened="true"
	:default-active="DefaultActive"
	text-color="#bfcbd9"
	@open="handleOpen"
	@close="handleClose"
	router
	>
		<MenuTree :Data="MenuList"></MenuTree>
	</el-menu> 
</template>

<script setup>
	import { useRouter } from "vue-router";
	import { ref ,reactive } from "vue";
	import MenuTree from "./MenuTree.vue";
	import {storeToRefs} from "pinia"
	import {useMenuCollapseStore} from"@/store/menu";
	const router = useRouter();
	let DefaultActive= ref(router.currentRoute.value.fullPath)


	const {collapse}=storeToRefs(useMenuCollapseStore());

	const MenuList=reactive([
		{
			ID:0,
			Title:"首页",
			Name:"Home",
			Path:"/Home",
			Icon:"House",
		},
		{
			ID:1,
			Title:"系统管理",
			Name:"SystemManagement",
			Path:"/SystemManagement",
			Icon:"Setting",
			Children:[{
				ID:2,
				Title:"用户管理",
				Name:"UserManage",
				Path:"/UserManage",
				Icon:"User",
			},{
				ID:2,
				Title:"菜单管理",
				Name:"MenuManage",
				Path:"/MenuManage",
				Icon:"User",
			}]
		}
	])
	const handleOpen=(key,keyPath)=>{
		console.log("Open",key,keyPath)
	};
	const handleClose=(key,keyPath)=>{
		console.log("close",key,keyPath)
	};
</script>

<style scoped >
	.el-menu{
		height: calc(100% - 48px);
		border-right: 0;
		/* background-image: url("../../assets/images/letft-bar.png");
		background-size: 100%; */
	}
	#app .sidebar-container .nest-menu .el-sub-menu>.el-sub-menu__title:hover, #app .sidebar-container .el-sub-menu .el-menu-item:hover {
		background-color: #001528!important;
	}
</style>